import { TeamOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';
import { Button } from 'antd';

import { crowdOptions } from './constants';

// eslint-disable-next-line no-unused-vars
const Crowd = ({ handleChangeSelectDim, selectedDimId }) => {
  return (
    <>
      <div style={{ margin: '10px 0 0 10px' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '90px' }}>
            <TeamOutlined style={{ height: 12, marginRight: '5px' }} />
            <span>已有人群</span>
          </div>
          <div>
            {crowdOptions.map((dim) => {
              const { id, dimName } = dim;
              return (
                <ButtonItem
                  key={id}
                  onClick={() => handleChangeSelectDim(id)}
                  type={selectedDimId === id ? 'primary' : 'default'}
                >
                  {dimName}
                </ButtonItem>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

const TagButtonList = ({ dims, handleChangeSelectDim, selectedDimId }) => {
  if (!dims) return null;
  return dims.map((dimSection) => {
    const { children, id, dimName, ico } = dimSection;
    return (
      <div key={id} style={{ margin: '10px 0 0 10px' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <div style={{ width: '90px' }}>
            <img
              alt="图片"
              src={ico.replace('https:', '')}
              style={{ height: 12, marginRight: '5px' }}
            />
            <span>{dimName || '默认名称'}</span>
          </div>
          <div>
            {children.map((dim) => {
              const { dimName, id } = dim;
              return (
                <ButtonItem
                  key={id}
                  onClick={() => handleChangeSelectDim(id)}
                  type={selectedDimId === id ? 'primary' : 'default'}
                >
                  {dimName}
                </ButtonItem>
              );
            })}
          </div>
        </div>
      </div>
    );
  });
};

const ButtonList = ({ dims, handleChangeSelectDim, selectedDimId }) => {
  return (
    <>
      <TagButtonList
        dims={dims}
        handleChangeSelectDim={handleChangeSelectDim}
        selectedDimId={selectedDimId}
      />
      <Crowd
        handleChangeSelectDim={handleChangeSelectDim}
        selectedDimId={selectedDimId}
      />
    </>
  );
};
export default ButtonList;

const ButtonItem = styled(Button)`
  margin: 10px 0 0 10px;
`;
